<template>
<div>
  <div class="crumbs">
    <el-breadcrumb separator="/">
      <el-breadcrumb-item>
        <i class="el-icon-menu"></i> 权限管理
      </el-breadcrumb-item>
    </el-breadcrumb>
  </div>
  <div class="container">
      <el-select v-model="selAuth" style="margin-left: 10px" placeholder="权限名称" class="handle-select mr10">
        <el-option :value="0" :label="'请选择'"></el-option>
        <el-option
            v-for="item in queryForm"
            :key="item.sysAuthId"
            :label="item.sysAuthAlias"
            :value="item.sysAuthId">
        </el-option>
      </el-select>
      <el-button type="primary" icon="el-icon-search" class="mr10" @click="goSearch">搜索</el-button>
      <el-button type="success" class="mr10" icon="el-icon-circle-plus-outline" @click="showAuthForm=true">添加</el-button>
      <el-popconfirm title="确定删除所选项吗？" @confirm="delAuth(null)">
        <el-button style="margin-left: 10px" type="danger" plain slot="reference" :disabled="delBtl">批量删除</el-button>
      </el-popconfirm>
  </div>
  <div class="container" style="margin: 15px">
    <el-table
        :data="tableData"
        border
        :header-cell-style="{'text-align':'center', 'background':'lightgreen'}"
        style="width: 100%"
        @selection-change="handleSelectionChange"
        :cell-style="{'text-align':'center'}">
      <el-table-column
          type="selection"
      >
      </el-table-column>
      <el-table-column
          prop="sysAuthId"
          label="权限Id">
      </el-table-column>
      <el-table-column
          prop="sysUsers[0].sysUserName"
          label="用户名">
      </el-table-column>
      <el-table-column
          prop="sysAuthName"
          label="权限名称"
          width="180">
      </el-table-column>
      <el-table-column
          prop="sysAuthAlias"
          label="权限别名">
      </el-table-column>
      <el-table-column
          prop="sysAuthDesc"
          label="权限描述">
      </el-table-column>
      <el-table-column
          label="操作">
        <template slot-scope="scope">
          <el-button @click="toUpdate(scope.row.sysAuthId)" type="text" size="normal" >更新</el-button>
          <el-popconfirm title="确定删除吗？" @confirm="delAuth(scope.row.sysAuthId)">
            <el-button type="text" slot="reference">删除</el-button>
          </el-popconfirm>
        </template>
      </el-table-column>
    </el-table>
  </div>
  <el-dialog
      title="添加资讯"
      :visible.sync="showAuthForm"
      width="660px">
    <el-form :model="authForm" ref="authForm" label-width="180px" class="demo-editForm">
      <el-form-item label="系统权限名称" prop="title">
        <el-col :span="13" style="margin-left: 5px">
          <el-input v-model="authForm.sysAuthName" autocomplete="off"></el-input>
        </el-col>
      </el-form-item>
      <el-form-item label="权限别名" prop="title">
        <el-col :span="13" style="margin-left: 5px">
          <el-input v-model="authForm.sysAuthAlias" autocomplete="off"></el-input>
        </el-col>
      </el-form-item>
      <el-form-item label="权限描述" prop="title">
        <el-col :span="13" style="margin-left: 5px">
          <el-input v-model="authForm.sysAuthDesc" autocomplete="off"></el-input>
        </el-col>
      </el-form-item>
      <el-form-item>
        <el-button style="margin-left:-50px;" @click="Cancel">取 消</el-button>
        <el-button type="primary"  @click="authOperation">保存</el-button>
      </el-form-item>
    </el-form>
  </el-dialog>
</div>
</template>

<script>
export default {
  name: "UserAuth",
  methods: {
    getAuth(){
      console.log(this.selAuth)
      this.$axios.get("/sys:auth/getAuth?id="+this.selAuth).then(res=>{
        this.tableData=res.data.data;
        if (this.flag!=1)this.queryForm=res.data.data;
      })
    },
    goSearch(){
      this.flag=1;
      this.getAuth();
    },
    delAuth(id){
      let ids=[];
      if (id)ids.push(id);
      else {
        this.mulSelection.forEach(row=>{
          ids.push(row.sysAuthId)
        })
      }
      this.$axios.get("/sys:auth/delAuth?ids="+ids).then(res => {
        if (res.data.data > 0)this.getAuth();
      })
    },
    handleSelectionChange(val) {//表单选择改变时
      this.mulSelection = val;//给选项赋值
      console.log(this.mulSelection)
      this.delBtl = val.length == 0;//判断是否批量删除
    },
    Cancel(){
      this.showAuthForm=false;
      this.Reset('authForm');
    },
    toUpdate(sysAuthId){
      this.$axios.get("/sys:auth/getAuthById?id="+sysAuthId).then(res=>{
        this.authForm=res.data.data;
        this.isUpdate=true;
        this.showAuthForm=true;
      })
    },
    authOperation(){
      let authForm=JSON.stringify(this.authForm);
      console.log(authForm)
      let url=this.isUpdate?"/sys:auth/updateAuth/":"/sys:auth/saveAuth/"
      this.$axios.post(url+authForm).then(res=>{
        if (res.data.data>0){
          this.getAuth();
          this.showAuthForm=false;
          this.Reset('authForm');
          this.isUpdate=false;
        }
      },100)
    },
    Reset(form){
      this.authForm={};
    }
  },
  data() {
    return {
      tableData: [],
      queryForm:[],
      flag:0,
      selAuth: 0,
      selAuthForm: 0,
      delBtl:true,
      //多选值
      mulSelection: [],
      showAuthForm:false,
      authForm:{},
      isUpdate:false
    }
  },
  created() {
    this.getAuth();
  }
}
</script>

<style scoped>
.el-table .warning-row {
  background: oldlace;
}

.el-table .success-row {
  background: #f0f9eb;
}
</style>